<template>
    <div class="change-password">
        <ul>
            <li>
                <mt-field label="输入旧密码 ：" type="password" v-model="oPassword"></mt-field>
            </li>
            <li>
                <mt-field label="输入新密码 ：" type="password" placeholder="6~20位数字,字母,下划线" v-model="password"></mt-field>
            </li>
            <li>
                <mt-field label="确认新密码 ：" type="password" v-model="cPassword"></mt-field>
            </li>
        </ul>
        <div class="btn">
            <div class="sure" @click="updatePass">确认</div>
            <div class="cancle" @click="$router.go(-1)">取消</div>
        </div>
    </div>
</template>
<script>
import md5 from 'js-md5'
import io from 'api/io'
export default {
    name: 'change-password',
    data() {
        return {
            oPassword: '',
            password: '',
            cPassword: ''
        }
    },
    methods: {
        async updatePass() {
            let lenMes = '输入6~20位内的数字，字母或下划线'
            if (this.oPassword.length < 6 || this.oPassword.length > 20) {
                Toast('旧密码' + lenMes)
                return
            }
            if (this.password.length < 6 || this.password.length > 20) {
                Toast('新密码' + lenMes)
                return
            }
            let reg = /^[a-zA-Z0-9_]*$/
            if (!reg.test(this.password)) {
                Toast('新密码' + lenMes)
                return
            }
            if (this.cPassword.length < 6 || this.cPassword.length > 20) {
                Toast('确认密码' + lenMes)
                return
            }
            if (this.oPassword === this.password) {
                Toast('输入的新密码与旧密码须不一致')
                return
            }
            if (this.cPassword !== this.password) {
                Toast('两次输入的新密码不一致，请重新输入')
                return
            }
            let oPassword = md5(this.oPassword + 'yjfggt')
            let password = md5(this.password + 'yjfggt')
            let cPassword = md5(this.cPassword + 'yjfggt')
            let { data } = await io.post(io.updatePass, { oPassword, password, cPassword })
            if (data.success) {
                Toast('密码修改成功')
                this.$router.go(-1)
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.change-password
    background #f4fff4
    min-height 100%
    ul
        padding 0
        margin 0
        li
            list-style none
            height 55px
            background white
            display flex
            align-items center
            padding 0 10px
            &:nth-child(2)
                border-bottom 1px solid #eeeeee
                margin-top 10px
    .btn
        display flex
        padding 0 35px
        div
            flex 1
            height 40px
            display flex
            border-radius 21px
            justify-content center
            align-items center
            font-size 18px
            margin-top 30px
        .sure
            background-image linear-gradient(180deg, #99f164 0%, #77de6b 37%, #54cb72 74%, #4eb667 100%)
            color #fefefe
            height 42px
        .cancle
            border 1px solid #4bc66b
            margin-left 35px
            background white
</style>
<style lang="stylus">
.change-password
    .mint-field
        width 100%
</style>

